<template>
  <div class="workbebch">
    <el-row>
      <el-col :span="24" class="header">
        <div class="header-left">
          <div class="header-left-start" @click="randomPositoinXY"></div>
          <div class="header-left-end">
            <h3>你好，{{ name }}，欢迎使用{{ $t('login.systemName') }}!</h3>
            <h4>今日晴，20℃ - 32℃！(tip:点击头像切换头像)</h4>
          </div>
        </div>
        <div class="header-right">
          <div class="header-right-item">
            <p>代办</p>
            <h2>5/10</h2>
          </div>
          <div class="header-right-item">
            <p>项目</p>
            <h2>8</h2>
          </div>
          <div class="header-right-item">
            <p>团队</p>
            <h2>35</h2>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row gutter="15">
      <el-col :span="16">
        <el-row>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>项目</span>
                <el-button type="primary" link>更多</el-button>
              </div>
            </template>
            <el-row class="card-content">
              <el-col :span="8">
                <div class="col-top">
                  <GithubIcon />
                  <a href="https://github.com/" target="_blank">Github</a>
                </div>
                <div class="col-center">不要等待机会，而要创造机会。</div>
                <div class="col-bottom">
                  <span>开源组</span>
                  <span>2022-08-05</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="col-top">
                  <VueIcon />
                  <a href="https://cn.vuejs.org/" target="_blank">Vue</a>
                </div>
                <div class="col-center">现在的你决定将来的你。</div>
                <div class="col-bottom">
                  <span>算法组</span>
                  <span>2021-04-01</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="col-top">
                  <Html5Icon />
                  <a
                    href="https://www.w3school.com.cn/html/html5_intro.asp"
                    target="_blank"
                    >HTML5</a
                  >
                </div>
                <div class="col-center">没有什么才能比努力更重要。</div>
                <div class="col-bottom">
                  <span>综合组</span>
                  <span>2021-07-29</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="col-top">
                  <NodejsIcon />
                  <a href="http://nodejs.p2hp.com/" target="_blank">Node.js</a>
                </div>
                <div class="col-center">但愿人长久，千里共婵娟。</div>
                <div class="col-bottom">
                  <span>设计组</span>
                  <span>2022-11-01</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="col-top">
                  <ReactIcon />
                  <a href="http://react.caibaojian.com.cn/" target="_blank"
                    >React</a
                  >
                </div>
                <div class="col-center">万物皆组件。</div>
                <div class="col-bottom">
                  <span>销售组</span>
                  <span>2022-10-01</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="col-top">
                  <WebpackIcon />
                  <a href="https://webpack.docschina.org/" target="_blank"
                    >Webpack</a
                  >
                </div>
                <div class="col-center">遥思初时故人语,愿君少年佛若雪。</div>
                <div class="col-bottom">
                  <span>公关组</span>
                  <span>2021-04-01</span>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
        <el-row>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>最新动态</span>
                <el-button type="primary" link>更多</el-button>
              </div>
            </template>
            <ul class="card-content1">
              <li>
                <div
                  class="li-left"
                  :style="{
                    'background-position': `${2.9 + 1 * 10.47}% ${
                      4.2 + 10.25 * 3
                    }%`
                  }"
                ></div>
                <div class="li-right">
                  <p>张三 在<i>开源组</i>创建了项目<i>Vue</i></p>
                  <p>刚刚</p>
                </div>
              </li>
              <li>
                <div
                  class="li-left"
                  :style="{
                    'background-position': `${2.9 + 10.47 * 1}% ${
                      4.2 + 10.25 * 4
                    }%`
                  }"
                ></div>
                <div class="li-right">
                  <p>李四 在<i>设计组</i>按照设计规划和原型，完成了高保真</p>
                  <p>2022.09.01</p>
                </div>
              </li>
              <li>
                <div
                  class="li-left"
                  :style="{
                    'background-position': `${2.9 + 10.47 * 2}% ${
                      4.2 + 10.25 * 2
                    }%`
                  }"
                ></div>
                <div class="li-right">
                  <p>
                    浮冰
                    在<i>算法组</i>再次改进了卡片排列算法，在原有基础上提高效率20%
                  </p>
                  <p>2022.08.10</p>
                </div>
              </li>
              <li>
                <div
                  class="li-left"
                  :style="{
                    'background-position': `${2.9 + 10.47 * 4}% ${
                      4.2 + 10.25 * 7
                    }%`
                  }"
                ></div>
                <div class="li-right">
                  <p>水烟梦 在<i>销售组</i>成功签下<i>智慧交通</i>项目的合同</p>
                  <p>2022.8.9</p>
                </div>
              </li>
              <li>
                <div
                  class="li-left"
                  :style="{
                    'background-position': `${2.9 + 10.47 * 9}% ${
                      4.2 + 10.25 * 9
                    }%`
                  }"
                ></div>
                <div class="li-right">
                  <p>朵朵 在<i>综合组</i>完成了第二季度项目进度汇报</p>
                  <p>2022.07.01</p>
                </div>
              </li>
              <li>
                <div
                  class="li-left"
                  :style="{
                    'background-position': `${2.9 + 10.47 * 4}% ${
                      4.2 + 10.25 * 7
                    }%`
                  }"
                ></div>
                <div class="li-right">
                  <p>水烟梦 在<i>销售组</i>跟进了<i>智慧交通</i>项目</p>
                  <p>2022.06.02</p>
                </div>
              </li>
              <li>
                <div
                  class="li-left"
                  :style="{
                    'background-position': `${2.9 + 10.47 * 1}% ${
                      4.2 + 10.25 * 4
                    }%`
                  }"
                ></div>
                <div class="li-right">
                  <p>李四 在<i>设计组</i>完成了需求对接澄清</p>
                  <p>2022.05.22</p>
                </div>
              </li>
              <li>
                <div
                  class="li-left"
                  :style="{
                    'background-position': `${2.9 + 10.47 * 2}% ${
                      4.2 + 10.25 * 2
                    }%`
                  }"
                ></div>
                <div class="li-right">
                  <p>浮冰 在<i>算法组</i>优化了卡片排列算法，效率提高了60%</p>
                  <p>2022.04.07</p>
                </div>
              </li>
              <li>
                <div
                  class="li-left"
                  :style="{
                    'background-position': `${2.9 + 10.47 * 4}% ${
                      4.2 + 10.25 * 7
                    }%`
                  }"
                ></div>
                <div class="li-right">
                  <p>水烟梦 在<i>销售组</i>签下了<i>智慧园区</i>项目</p>
                  <p>2022.04.02</p>
                </div>
              </li>
              <li>
                <div
                  class="li-left"
                  :style="{
                    'background-position': `${2.9 + 10.47 * 1}% ${
                      4.2 + 10.25 * 4
                    }%`
                  }"
                ></div>
                <div class="li-right">
                  <p>李四 在<i>设计组</i>完成了第二季度项目任务报表</p>
                  <p>2022.09.01</p>
                </div>
              </li>
            </ul>
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>快捷导航</span>
                <el-button type="primary" link>更多</el-button>
              </div>
            </template>
            <el-row class="card-content">
              <el-col :span="8" class="tbBox">
                <el-icon :size="32" color="lime"><House /></el-icon>
                <span>工作台</span>
              </el-col>
              <el-col :span="8" class="tbBox">
                <el-icon :size="32" color="#409eff"><Eleme /></el-icon>
                <span>Element</span>
              </el-col>
              <el-col :span="8" class="tbBox">
                <el-icon :size="32" color="orange"><List /></el-icon>
                <span>表格</span>
              </el-col>
              <el-col :span="8" class="tbBox">
                <el-icon :size="32" color="#6730bd"><Tickets /></el-icon>
                <span>表单</span>
              </el-col>
              <el-col :span="8" class="tbBox">
                <el-icon :size="32" color="#29cb9f"><Menu /></el-icon>
                <span>菜单</span>
              </el-col>
              <el-col :span="8" class="tbBox">
                <el-icon :size="32" color="purple"><HelpFilled /></el-icon>
                <span>echarts图表</span>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
        <el-row>
          <el-card class="box-card imgCard"
            ><div><img src="@/assets/image/zhenji.png" alt="" /></div></el-card
        ></el-row>
        <el-row>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>统计</span>
                <el-button type="primary" link>更多</el-button>
              </div>
            </template>
            <div ref="echarts" class="echartsBox"></div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import store from '../../store'
import GithubIcon from '@/assets/svg/GithubIcon.vue'
import VueIcon from '@/assets/svg/VueIcon.vue'
import Html5Icon from '@/assets/svg/Html5Icon.vue'
import NodejsIcon from '@/assets/svg/NodejsIcon.vue'
import ReactIcon from '@/assets/svg/ReactIcon.vue'
import WebpackIcon from '@/assets/svg/WebpackIcon.vue'
import initMap from '@/echarts/workbenchDeom'
import * as echartss from 'echarts'
// css精灵图定位
const postionXY = ref()
const randomPositoinXY = () => {
  const x = Math.floor(Math.random() * 10)
  const y = Math.floor(Math.random() * 10)
  postionXY.value = `${2.9 + x * 10.47}% ${4.2 + y * 10.25}%`
}
randomPositoinXY()
// userInfo.name
const name = store.state.baseInfo.userInfo?.name
// echarts map
const echarts = ref()
onMounted(() => {
  const myChart = echartss.init(echarts.value)
  initMap(myChart)
})
</script>

<style lang="scss" scoped>
.workbebch {
  height: 100%;
  .header {
    display: flex;
    justify-content: space-between;
    background-color: var(--bgColor);
    padding: 20px;
    border: 1px solid var(--borderColor);
    margin-bottom: 15px;
    .header-left {
      display: flex;
      .header-left-start {
        width: 70px;
        height: 70px;
        background: url(../../assets/image/wzryGame.png) no-repeat;
        background-position: v-bind(postionXY);
        background-size: 1563%;
        border-radius: 25%;
      }
      .header-left-end {
        margin-left: 20px;
        h3 {
          font-size: 18px;
          font-weight: 400;
          margin: 5px 0 15px;
        }
        h4 {
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
    .header-right {
      display: flex;
      .header-right-item {
        text-align: center;
        margin-right: 15px;
        p {
          font-size: 16px;
          margin: 5px 0 15px;
        }
        h2 {
          font-size: 24px;
        }
      }
    }
  }
  .box-card {
    width: 100%;
    border: 1px solid var(--borderColor);
    margin-bottom: 15px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 16px;
      }
    }
    ::v-deep .el-card__body {
      padding: 15px;
    }
    .card-content {
      .el-col {
        font-size: 14px;
        padding: 20px;
        border: 1px solid var(--borderColor);
        color: var(--textLotColor);
        transition: all 0.4s ease 0.1s;
        animation: rotates 5s linear 0.2s;
        @keyframes rotates {
          0% {
            transform: rotateY(0deg);
          }
          10% {
            transform: rotateY(90deg);
          }
          20% {
            transform: rotateY(0deg);
          }
        }
        &:hover {
          // transform: rotateZ(360deg);
          background: var(--bgPageColor);
        }

        .col-top {
          display: flex;
          align-items: center;
          a {
            font-size: 18px;
            margin-left: 15px;
            color: var(--textColor);
          }
        }
        .col-center {
          margin: 5px 0 15px;
        }
        .col-bottom {
          display: flex;
          justify-content: space-between;
        }
      }
      .tbBox {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: unset;
        // border-right: 1px solid var(--borderColor);
        animation: rotate1 5s linear 0.2s;
        @keyframes rotate1 {
          0% {
            transform: rotateX(0deg);
          }
          10% {
            transform: rotateX(180deg);
          }
          20% {
            transform: rotateX(0deg);
          }
        }
        &:nth-child(3n) {
          border-right: unset;
        }
        span {
          margin-top: 10px;
        }
      }
    }
    .card-content1 {
      li {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid var(--borderColor);
        .li-left {
          width: 35px;
          height: 35px;
          background: url(http://localhost:8080/img/wzryGame.033f064e.png)
            no-repeat;
          background-position: 2.9% 4.2%;
          background-size: 1563%;
          border-radius: 25%;
          margin: 0 20px 0 10px;
        }
        .li-right {
          p {
            font-size: 14px;
            i {
              color: var(--textHoverColor);
            }
            &:first-child {
              margin-bottom: 10px;
            }
            &:last-child {
              font-size: 12px;
              color: var(--textLotColor);
            }
          }
        }
      }
    }
  }
  .imgCard {
    ::v-deep .el-card__body {
      & > div {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        img {
          height: 15vw;
        }
      }
    }
  }
  .echartsBox {
    width: 100%;
    height: 369px;
  }
}
</style>
